<template>
  <div>
<!--    <el-upload-->
<!--    action="#"-->
<!--    title="上传文件"-->
<!--    :file-list="fileList"-->
<!--    :auto-upload="false"-->
<!--    >-->
<!--      <el-button size="small" type="success" @click="click">点击上传</el-button>-->
<!--    </el-upload>-->
      <el-button size="small" type="success" class="handle-box" @click="openPenMaDoc">喷码明细表</el-button>
      <el-button size="small" type="success" class="handle-box" @click="openXianxingDJDoc">先行登记保存批准表</el-button>
      <el-button size="small" type="success" class="handle-box" @click="openYiSongGongAnWUPinDoc">移送公安物品目录表</el-button>
      <el-button size="small" type="success" class="handle-box" @click="openSDHZDoc">送达回证表</el-button>
      <el-button size="small" type="success" class="handle-box" @click="openAJCLMLDoc">案件材料目录表</el-button>
      <el-button size="small" type="success" class="handle-box" @click="">其他</el-button>
      <el-input
          :rows="5"
          type="textarea"
          placeholder="Please input"
          v-model="ocrStrList"
      />

    <el-dialog title="新增图片" v-model="upload_image" width="30%">
      <el-form label-width="150px">
        <el-form-item label="点击扫描照片" >
          <el-upload class="upload-demo"
                     action="#"
                     list-type="picture-card"
                     :on-change="handleChange"
                     :on-remove="handleRemove"
                     :on-preview="true"
                     :auto-upload="false"
                     :on-progress="true"
                     accept="bmp, jpg, png, gif, jpeg"
                     :show-file-list="true" >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="upload_image = false">取 消</el-button>
					<el-button type="primary" @click="upload_create()">确 定</el-button>
				</span>
      </template>
    </el-dialog>

    <el-dialog title="新增图片" v-model="upload_image1" width="30%">
      <el-form label-width="150px">
        <el-form-item label="点击扫描照片" >
          <el-upload class="upload-demo"
                     action="#"
                     list-type="picture-card"
                     :on-change="handleChange"
                     :on-remove="handleRemove"
                     :on-preview="true"
                     :auto-upload="false"
                     :on-progress="true"
                     accept="bmp, jpg, png, gif, jpeg"
                     :show-file-list="true" >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="upload_image = false">取 消</el-button>
					<el-button type="primary" @click="upload_create1()">确 定</el-button>
				</span>
      </template>
    </el-dialog>

    <el-dialog title="新增图片" v-model="upload_image2" width="30%">
      <el-form label-width="150px">
        <el-form-item label="点击扫描照片" >
          <el-upload class="upload-demo"
                     action="#"
                     list-type="picture-card"
                     :on-change="handleChange"
                     :on-remove="handleRemove"
                     :on-preview="true"
                     :auto-upload="false"
                     :on-progress="true"
                     accept="bmp, jpg, png, gif, jpeg"
                     :show-file-list="true" >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="upload_image = false">取 消</el-button>
					<el-button type="primary" @click="upload_create2()">确 定</el-button>
				</span>
      </template>
    </el-dialog>

    <el-dialog title="新增图片" v-model="upload_image3" width="30%">
      <el-form label-width="150px">
        <el-form-item label="点击扫描照片" >
          <el-upload class="upload-demo"
                     action="#"
                     list-type="picture-card"
                     :on-change="handleChange"
                     :on-remove="handleRemove"
                     :on-preview="true"
                     :auto-upload="false"
                     :on-progress="true"
                     accept="bmp, jpg, png, gif, jpeg"
                     :show-file-list="true" >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="upload_image = false">取 消</el-button>
					<el-button type="primary" @click="upload_create3()">确 定</el-button>
				</span>
      </template>
    </el-dialog>

    <el-dialog title="新增图片" v-model="upload_image4" width="30%">
      <el-form label-width="150px">
        <el-form-item label="点击扫描照片" >
          <el-upload class="upload-demo"
                     action="#"
                     list-type="picture-card"
                     :on-change="handleChange"
                     :on-remove="handleRemove"
                     :on-preview="true"
                     :auto-upload="false"
                     :on-progress="true"
                     accept="bmp, jpg, png, gif, jpeg"
                     :show-file-list="true" >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="upload_image = false">取 消</el-button>
					<el-button type="primary" @click="upload_create4()">确 定</el-button>
				</span>
      </template>
    </el-dialog>

    <!--    //喷码明细表-->
    <el-dialog title="" v-model="Penma_report_Visible" width="75%">
      <html>
      <head>
        <title></title>
      </head>
      <body>
      <h1 align="center">
          福建省闽侯县烟草专卖局 
      </h1>
      <h1 align="center">
          涉案卷烟喷码明细表
      </h1>


      <table border="1" style="border-collapse: collapse;" width="100%" >

        <tr>
          <th colspan="1"  height="30px"> 先行登记保存通知书号 </th>
          <th colspan="4" height="30px"   align="center"> <input style="width: 650px" type="text" v-model="other_table_value_obj.xian_xing_deng_ji"></th>
        </tr>

        <tr>
          <th  colspan="1" height="30px"> 卷烟品名 </th>
          <th  colspan="1" height="30px"> 条形码 </th>
          <th colspan="2" align="center"> 喷码明细 </th>
          <th colspan="1"  align="center"> 数量（条） </th>
        </tr>
        
        <tr v-for="item in valueList">
          <th width="25%" height="30px"> <input type="text" v-model="item.juan_yan_name"> </th>
          <th width="25%"><input type="text" v-model="item.tiao_xing_ma"></th>
          <th width="25%"><input type="text" v-model="item.pen_ma_detail1"></th>
          <th width="25%"><input type="text" v-model="item.pen_ma_detail2"></th>
          <th width="25%">
            <input type="text" v-model="item.num">
          </th>
        </tr>

        <tr>
          <th colspan="2" height="30px" align="left"> 共计（品种）：<input style="text-align:center" type="text" v-model="other_table_value_obj.gong_ji"> </th>
          <th colspan="3" height="30px" align="left"> 合计（数量）：<input style="text-align:center" type="text" v-model="other_table_value_obj.he_ji"> </th>
        </tr>

        <tr  height="80px">
          <th colspan="2" align="left">执法人员：
                                        <br/>&emsp;<input style="text-align:center" type="text" v-model="other_table_value_obj.zhi_fa_ren_yuan.zhi_fa_name1">
                                         &emsp;执法证号：<input style="text-align:center" type="text" v-model="other_table_value_obj.zhi_fa_ren_yuan.zhi_fa_zheng_hao1">
                                        <br/>&emsp;<input style="text-align:center" type="text" v-model="other_table_value_obj.zhi_fa_ren_yuan.zhi_fa_name2"> 
                                        &emsp;执法证号：<input style="text-align:center" type="text" v-model="other_table_value_obj.zhi_fa_ren_yuan.zhi_fa_zheng_hao2">
                                                </th>
          <th colspan="3" align="left"> 当事人:
                                                <br/>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                                                <input style="text-align:center" type="text"  v-model="other_table_value_obj.dang_shi_ren"></th>
        </tr>

      </table>
      </body>
      </html>

      <template #footer>
				<span class="dialog-footer">
          <el-button type="success" @click="start_create">上 传</el-button>
          <el-button type="primary" @click="logforme">打 印</el-button>

				</span>
      </template>
    </el-dialog>


    <!--    //先行登记保存批准表-->
    <el-dialog title="" v-model="XianxingDJ_report_Visible" width="75%">
      <html>
      <head>
        <title></title>
      </head>
      <body>
      <h1 align="center">
          福建省闽侯县烟草专卖局 
      </h1>
      <h1 align="center">
          先行登记保存批准表
      </h1>
      <h3 align="center">  <input v-model="XianxingDJ_value_obj.houyan_cunzhun" style="width: 250px;height: 20px; margin: 5px;text-align: center;">  </h3>
      <h3 align="center">  <textarea v-model="XianxingDJ_value_obj.weifa_shuoming" :rows="5" style="width: 650px;height: auto; margin: 10px;"> </textarea> </h3>
      
      <table border="1" style="border-collapse: collapse; text-align: center;" width="100%" align="center" >
        <tr>
          <th  colspan="1" height="30px" width="250px"> 品种 </th>
          <th  colspan="1" height="30px" width="250px"> 条条形码 </th>
          <th  colspan="1" height="30px" width="250px"> 规格型号 </th>
          <th colspan="1" width="200px"> 单位 </th>
          <th colspan="1"> 数量 </th>
        </tr>
        
        <tr v-for="item in valueListxxdj">
          <th width="25%" height="30px"> <input type="text" v-model="item.PinZhong"> </th>
          <th width="25%"><input type="text" v-model="item.tiao_xing_ma"></th>
          <th width="25%"><input type="text" v-model="item.GuiGexh"></th>
          <th width="25%"><input type="text" v-model="item.Danwei"></th>
          <th width="25%"><input type="text" v-model="item.num"></th>
        </tr>

        <tr height="50px">
          <th colspan="2" height="30px" align="left"> 共计：<input style="text-align:center" type="text" v-model="XianxingDJ_value_obj.he_ji"> </th>
          <th colspan="3" height="30px" align="left"> 总计：<input style="text-align:center" type="text" v-model="XianxingDJ_value_obj.zong_ji"> </th>
        </tr>

        <tr  height="50px">
          <th colspan="1" align="left">登记保存地点</th>
          <th colspan="4" align="center"> <input  style="text-align:center;width: 700px;" type="text"  v-model="XianxingDJ_value_obj.deng_ji_di_dian"></th>
        </tr>
      </table>
      <br>
      <h3 > &emsp;登记保存证据的保存期限为7日  </h3><br>
      <h3 > &emsp;承办人 （签名）：  <input style="text-align:center" type="text" v-model="XianxingDJ_value_obj.cheng_ban_ren.cheng_ban_ren1"><br>
        &emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp; <input style="text-align:center" type="text" v-model="XianxingDJ_value_obj.cheng_ban_ren.cheng_ban_ren2"></h3>
      
        <h3 align="right"> <input style="text-align:center width:20px"  type="text" v-model="XianxingDJ_value_obj.year">年
                            <input style="text-align:center" type="text" v-model="XianxingDJ_value_obj.month">月
                            <input style="text-align:center" type="text" v-model="XianxingDJ_value_obj.day">日</h3>
                            <br><br>
      <h3 > &emsp;负责人意见并签名  <input style="text-align:center" type="text" v-model="XianxingDJ_value_obj.fu_zhe_ren_yijian">
        &emsp;&emsp;<input style="text-align:center" type="text" v-model="XianxingDJ_value_obj.fu_zhe_ren_qianming"></h3>    
        <br><br>
        <h3 align="right"> <input style="text-align:center width:20px"  type="text" v-model="XianxingDJ_value_obj.year">年
                            <input style="text-align:center" type="text" v-model="XianxingDJ_value_obj.month">月
                            <input style="text-align:center" type="text" v-model="XianxingDJ_value_obj.day">日</h3>
                            <br><br>
      </body>
      </html>

      <template #footer>
				<span class="dialog-footer">
          <el-button type="success" @click="start_create1">上 传</el-button>
          <el-button type="primary" @click="logforme">打 印</el-button>
				</span>
      </template>
    </el-dialog>

        <!--  //移送公安物品目录表-->
    <el-dialog title="" v-model="YiSongGongAnWuPin_report_Visible" width="75%">
      <html>
      <head>
        <title></title>
      </head>
      <body>
      <h1 align="center">
          福建省闽侯县烟草专卖局 
      </h1>
      <h1 align="center">
          移送物品清单
      </h1>


      <table border="1" style="border-collapse: collapse;" width="100%" >



        <tr>
          <th  colspan="1" width="80px" height="30px"> 品种 </th>
          <th  colspan="1" width="80px" height="30px"> 规格 </th>
          <th colspan="1" width="50px" > 数量 </th>
          <th colspan="1" width="100px" > 备注 </th>
        </tr>
        
        <tr v-for="item in valueListYSGAWP">
          <th width="25%" height="30px"> <input type="text" v-model="item.PinZhong"> </th>
          <th width="25%"><input type="text" v-model="item.GuiGe"></th>
          <th width="25%"><input type="text" v-model="item.num"></th>
          <th width="25%"><input type="text" v-model="item.Beizhu"></th>
        </tr>

        <tr>
          <th colspan="2" height="30px" align="left"> 合计 </th>
          <th colspan="1" height="30px" align="left"> <input style="text-align:center" type="text" v-model="YSGAWP_value_obj.he_ji"> </th>
        </tr>

        <tr  height="80px">
          <th colspan="2" align="left">移送单位（印章）：
                                        <br/>&emsp;移送人<input style="text-align:center" type="text" v-model="YSGAWP_value_obj.yi_song_ren_qianming">
                                         &emsp;
                                         <br/><input style="text-align:center" type="text" v-model="YSGAWP_value_obj.YSyear">年
                                         <input style="text-align:center" type="text" v-model="YSGAWP_value_obj.YSmonth">月
                                         <input style="text-align:center" type="text" v-model="YSGAWP_value_obj.YSday">日
                                                </th>
          <th colspan="2" align="left">接收单位（印章）：
                                        <br/>&emsp;接收人<input style="text-align:center" type="text" v-model="YSGAWP_value_obj.jie_shou_ren_qianming">
                                         &emsp;
                                         <br/><input style="text-align:center" type="text" v-model="YSGAWP_value_obj.JSyear">年
                                         <input style="text-align:center" type="text" v-model="YSGAWP_value_obj.JSday">月
                                         <input style="text-align:center" type="text" v-model="YSGAWP_value_obj.JSday">日
                                                </th>
        </tr>

      </table>
      </body>
      </html>

      <template #footer>
				<span class="dialog-footer">
          <el-button type="success" @click="start_create2">上 传</el-button>
          <el-button type="primary" @click="logforme">打 印</el-button>

				</span>
      </template>
    </el-dialog>

    <!--    //送达回证表-->
      <el-dialog title="" v-model="SDHZ_report_Visible" width="75%">
      <html>
      <head>
        <title></title>
      </head>
      <body>
      <h1 align="center">
          福建省闽侯县烟草专卖局 
      </h1>
      <h1 align="center">
          送 达 回 证 
      </h1>
      <h3 align="center">  <input v-model="SDHZ_value_obj.houyan_cunzhun" style="width: 250px;height: 20px; margin: 5px;text-align: center;">  </h3>
      
      <table border="1" style="border-collapse: collapse; text-align: center;" width="100%" align="center" >
        <tr>
          <th  colspan="1" height="30px" width="250px"> 送达文书名称 </th>
          <th  colspan="1" height="30px" width="250px"> <input style="text-align:center" type="text" v-model="SDHZ_value_obj.SDWS_mingchen"> </th>
          <th  colspan="1" height="30px" width="250px"> 送达文书文号 </th>
          <th  colspan="1" height="30px" width="250px"> <input style="text-align:center" type="text" v-model="SDHZ_value_obj.SDWS_wenhao"> </th>
        </tr>
        

        <tr height="50px">
          <th colspan="1" height="30px" > 受送达人</th>
          <th colspan="3" height="30px" align="left"> <input style="text-align:center" type="text" v-model="SDHZ_value_obj.shou_SD_ren"> </th>
        </tr>

        <tr height="50px">
          <th colspan="1" height="30px" > 送达地点 </th>
          <th colspan="3" height="30px" align="left"> <input style="text-align:center" type="text" v-model="SDHZ_value_obj.songda_didian"> </th>
        </tr>

        <tr height="50px">
          <th colspan="1" height="30px" > 送达方式 </th>
          <th colspan="3" height="30px" align="left"> <input style="text-align:center" type="text" v-model="SDHZ_value_obj.songda_fangshi"> </th>
        </tr>

        <tr height="50px">
          <th colspan="1" height="30px" > 收件人姓名或盖章</th>
          <th colspan="3" height="30px" align="left"> <input style="text-align:center" type="text" v-model="SDHZ_value_obj.shou_jian_ren_qianming"> </th>
        </tr>

        <tr height="50px">
          <th colspan="1" height="30px" > 签收日期</th>
          <th colspan="3" height="30px" align="left"> 
            <input style="text-align:center" type="text" v-model="SDHZ_value_obj.QSyear">年
            <input style="text-align:center" type="text" v-model="SDHZ_value_obj.QSmonth">月
            <input style="text-align:center" type="text" v-model="SDHZ_value_obj.QSday">日
            <input style="text-align:center" type="text" v-model="SDHZ_value_obj.QShour">时
            <input style="text-align:center" type="text" v-model="SDHZ_value_obj.QSminute">分 </th>
        </tr>

        <tr height="50px">
          <th colspan="1" height="30px" > 代收人注明代收理由</th>
          <th colspan="3" height="30px" align="left"> <input style="text-align:center" type="text" v-model="SDHZ_value_obj.daishou_liyou"> </th>
        </tr>

        <tr height="50px">
          <th colspan="1" height="30px" > 见证人签字或盖章</th>
          <th colspan="3" height="30px" align="left"> <input style="text-align:center" type="text" v-model="SDHZ_value_obj.jian_zheng_ren_qianming"> </th>
        </tr>

        <tr height="50px">
          <th colspan="1" height="30px" > 送达人签名</th>
          <th colspan="3" height="30px" align="left"> <input style="text-align:center" type="text" v-model="SDHZ_value_obj.song_da_ren_qianming"> </th>
        </tr>

        <tr height="50px">
          <th colspan="1" height="30px" > 送达日期</th>
          <th colspan="3" height="30px" align="left"> 
            <input style="text-align:center" type="text" v-model="SDHZ_value_obj.SDyear">年
            <input style="text-align:center" type="text" v-model="SDHZ_value_obj.SDmonth">月
            <input style="text-align:center" type="text" v-model="SDHZ_value_obj.SDday">日
            <input style="text-align:center" type="text" v-model="SDHZ_value_obj.SDhour">时
            <input style="text-align:center" type="text" v-model="SDHZ_value_obj.SDminute">分 </th>
        </tr>

        <tr height="50px">
          <th colspan="1" height="30px" > 备注</th>
          <th colspan="3" height="30px" align="left"> <input style="text-align:center" type="text" v-model="SDHZ_value_obj.beizhu"> </th>
        </tr>
      </table>

      </body>
      </html>

      <template #footer>
				<span class="dialog-footer">
          <el-button type="success" @click="start_create3">上 传</el-button>
          <el-button type="primary" @click="logforme">打 印</el-button>
				</span>
      </template>
    </el-dialog>


    <!--    //案件材料目录表-->
        <el-dialog title="" v-model="AJCLML_report_Visible" width="75%">
      <html>
      <head>
        <title></title>
      </head>
      <body>
      <h1 align="center">
          闽侯县烟草专卖局 
      </h1>
      <h1 align="center">
          案件材料目录
      </h1>
      
      <table border="1" style="border-collapse: collapse; text-align: center;" width="100%" align="center" >
        <tr>
          <th  colspan="1" height="30px" width="150px"> 编号 </th>
          <th  colspan="1" height="30px" width="300px"> 材料名称 </th>
          <th  colspan="1" height="30px" width="250px"> 单位 </th>
          <th colspan="1" width="250px"> 规格型号 </th>
          <th colspan="1" width="250px" > 页数 </th>
          <th  colspan="1" height="30px" width="250px"> 特征 </th>
          <th  colspan="1" height="30px" width="250px"> 备注 </th>
        </tr>
        
        <tr v-for="item in valueListAJCLML">
          <th width="25%" height="30px"> <input style="width: 100px" type="text" v-model="item.Bianhao"> </th>
          <th width="20%"><input style="width: 300px" type="text" v-model="item.Mingchen"></th>
          <th width="20%"><input style="width: 100px" type="text" v-model="item.Danwei"></th>
          <th width="20%"><input style="width: 100px" type="text" v-model="item.GuiGe"></th>
          <th width="20%"><input style="width: 100px" type="text" v-model="item.Yeshu"></th>
          <th width="20%"><input style="width: 100px" type="text" v-model="item.Tezheng"></th>
          <th width="20%"><input style="width: 100px" type="text" v-model="item.Beizhu"></th>
        </tr>

      </table>
      <br>

      <h3 width="50px">       

            <br/>&emsp;移送人<input style="text-align:center" type="text" v-model="AJCLML_value_obj.yi_song_ren">
            &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;&emsp; &emsp; &emsp; &emsp; &emsp; &emsp; 
            &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; 
            接收人<input style="text-align:center" type="text" width="50px" v-model="AJCLML_value_obj.jie_shou_ren">
            <br/><input style="text-align:center" type="text" width="50px" v-model="AJCLML_value_obj.YSyear">年
            <input style="text-align:center" type="text" width="50px" v-model="AJCLML_value_obj.YSmonth">月
            <input style="text-align:center" type="text" v-model="AJCLML_value_obj.YSday">日
            &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;               
              <input style="text-align:center width:20%" type="text" width="20px" v-model="AJCLML_value_obj.JSyear">年
              <input style="text-align:center" type="text" width="50px" v-model="AJCLML_value_obj.JSday">月
              <input style="text-align:center" type="text" width="50px" v-model="AJCLML_value_obj.JSday">日 </h3>
                                       

        <h3>注:(1)一式两份，一份存档，一份交接受单位<br/>(2)监控视频、卡口照片及执法记录视频存放在证物带中</h3>
      </body>
      </html>

      <template #footer>
				<span class="dialog-footer">
          <el-button type="success" @click="start_create4">上 传</el-button>
          <el-button type="primary" @click="logforme">打 印</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="table_ocr">

import { ref, reactive,watch } from 'vue';
import {ElMessage, ElMessageBox, UploadUserFile} from 'element-plus';
// const tencentcloud = require("tencentcloud-sdk-nodejs")
import * as  tencentcloud from "tencentcloud-sdk-nodejs";
import {fetchData_s_mongodb_evidence_Cre, Ocr_image} from "../api";
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults';
import { title } from 'process';

const fileList = ref<UploadUserFile[]>([]);
const ocrStrList = ref<String[]>([]);
const Penma_report_Visible=ref(false);                            //喷码表预览视图
const XianxingDJ_report_Visible=ref(false);                            //先行登记表预览视图
const YiSongGongAnWuPin_report_Visible=ref(false);                            //移送公安商品目录表预览视图
const SDHZ_report_Visible=ref(false);                            //送达回证表预览视图
const AJCLML_report_Visible=ref(false);                            //案件材料目录表预览视图
// const OcrClient = tencentcloud.ocr.v20181119.Client
//
// const  click = () => {
//   console.log('OcrClient', OcrClient)
//   console.log('list', fileList)
// }

const img_form_data = reactive({
  case_number: '',
  type: '',
  name:'',
  content:'',
  remark:'',
});
const img = [];
const handleChange = (file) =>{
  img.push(file);
  // console.log(img)
}


const valueList =  ref<juan_yan[]>([]); // 数据元
const cacheList = ref<String[]>([]); // 数据暂存
const valueListxxdj =  ref<xxDJ[]>([]); // 数据元
const xxdjcacheList = ref<String[]>([]); // 数据暂存
const valueListYSGAWP =  ref<YSGAWP[]>([]); // 数据元
const YSGAWPcacheList = ref<String[]>([]); // 数据暂存
const valueListSDHZ =  ref<SDHZ[]>([]); // 数据元
const SDHZcacheList = ref<String[]>([]); // 数据暂存
const valueListAJCLML =  ref<AJCLML[]>([]); // 数据元
const AJCLMLcacheList = ref<String[]>([]); // 数据暂存

// 卷烟数据
class juan_yan{
  juan_yan_name: string;
  tiao_xing_ma: string;
  pen_ma_detail1: string;
  pen_ma_detail2: string;
  num: string;

  // 构造函数 
  constructor(
    juan_yan_name: string,
    tiao_xing_ma: string,
    pen_ma_detail1: string,
    pen_ma_detail2: string,
    num: string
  ) { 
    this.juan_yan_name = juan_yan_name 
    this.tiao_xing_ma = tiao_xing_ma 
    this.pen_ma_detail1 = pen_ma_detail1 
    this.pen_ma_detail2 = pen_ma_detail2 
    this.num = num 
  }  
}

// 先行登记表格数据
class xxDJ{
  PinZhong: string;
  tiao_xing_ma: string;
  GuiGexh: string;
  Danwei: string;
  num: string;

  // 构造函数 
  constructor(
    PinZhong: string,
    tiao_xing_ma: string,
    GuiGexh: string,
    Danwei: string,
    num: string
  ) { 
    this.PinZhong = PinZhong 
    this.tiao_xing_ma = tiao_xing_ma 
    this.GuiGexh = GuiGexh 
    this.Danwei = Danwei 
    this.num = num 
  }  
}

// 移送公安物品目录表格数据
class YSGAWP{
  PinZhong: string;
  GuiGe: string;
  num: string;
  Beizhu: string;

  // 构造函数 
  constructor(
    PinZhong: string,
    GuiGe: string,
    num: string,
    Beizhu:string

  ) { 
    this.PinZhong = PinZhong 
    this.GuiGe = GuiGe 
    this.num = num 
    this.Beizhu = Beizhu

  }  
}

// 案件材料目录表格数据
class AJCLML{
  Bianhao:string;
  Mingchen: string;
  Danwei: string;
  GuiGe: string;
  Yeshu: string;
  Tezheng: string;
  Beizhu:string;

  // 构造函数 
  constructor(
    Bianhao: string,
    Mingchen: string,
    Danwei: string,
    GuiGe: string,
    Yeshu: string,
    Tezheng: string,
    Beizhu:string,
  ) { 
    this.Bianhao = Bianhao 
    this.Mingchen = Mingchen 
    this.Danwei = Danwei 
    this.GuiGe = GuiGe
    this.Yeshu = Yeshu
    this.Tezheng = Tezheng
    this.Beizhu = Beizhu 
  }  
}

const other_table_value_obj =  reactive({
  dang_shi_ren: '',
  zhi_fa_ren_yuan: {
    zhi_fa_name1: '',
    zhi_fa_name2: '',
    zhi_fa_zheng_hao1: '',
    zhi_fa_zheng_hao2: ''
  },
  title: '',
  gong_ji: '',
  he_ji: '',
  xian_xing_deng_ji: ''
})

const XianxingDJ_value_obj =  reactive({
  cheng_ban_ren: {
    cheng_ban_ren1: '',
    cheng_ban_ren2: '',
  },
  fu_zhe_ren_qianming:'',
  fu_zhe_ren_yijian:'',
  year:'',
  month:'',
  day:'',
  zong_ji: '',
  he_ji: '',
  deng_ji_di_dian: '',
  houyan_cunzhun:'',
  weifa_shuoming:''
})

const YSGAWP_value_obj =  reactive({
  yi_song_ren_qianming:'',
  jie_shou_ren_qianming:'',
  YSyear:'',
  YSmonth:'',
  YSday:'',
  JSyear:'',
  JSmonth:'',
  JSday:'',
  he_ji: '',
})

const SDHZ_value_obj =  reactive({
  houyan_cunzhun:'',
  SDWS_mingchen:'',
  SDWS_wenhao:'',
  shou_SD_ren:'',
  songda_didian:'',
  songda_fangshi:'',
  shou_jian_ren_qianming:'',
  daishou_liyou:'',
  jian_zheng_ren_qianming:'',
  song_da_ren_qianming:'',
  beizhu:'',
  QSyear:'',
  QSmonth:'',
  QSday:'',
  QShour:'',
  QSminute:'',
  SDyear:'',
  SDmonth:'',
  SDday:'',
  SDhour:'',
  SDminute:'',
})

const AJCLML_value_obj =  reactive({
  yi_song_ren:'',
  jie_shou_ren:'',
  YSyear:'',
  YSmonth:'',
  YSday:'',
  JSyear:'',
  JSmonth:'',
  JSday:'',
})

const openPenMaDoc = () => {
  Penma_report_Visible.value = true;
}

const openXianxingDJDoc = () => {
  XianxingDJ_report_Visible.value = true;
}

const openYiSongGongAnWUPinDoc = () => {
  YiSongGongAnWuPin_report_Visible.value = true;
}

const openSDHZDoc = () => {
  SDHZ_report_Visible.value = true;
}

const openAJCLMLDoc = () => {
  AJCLML_report_Visible.value = true;
}

const handlePenMa = () => {
  const title = '喷码明细表'
  const tableName1 = '先行登记'
  const tableName2 = '卷烟品名'
  const tableName3 = '条形码'
  const tableName4 = '喷码明细'
  const tableName5 = '数量'

  const footName1 = '执法人员'
  const footName2 = '当事人'
  const footName3 = '共计'
  const footName4 = '合计'

  for (let i = 0; i < ocrStrList.value.length; i++) {

    let item = ocrStrList.value[i]
    // console.log('item:', i, item);

    
    if (item.includes(title)) {
      other_table_value_obj.title = item.toString()
      continue
    }


    if (item.includes(footName4)) {
      const arr = item.split(':')
      other_table_value_obj.he_ji = arr[arr.length-1]
      continue
    }
    

    if (item.includes(tableName1)) {
      other_table_value_obj.xian_xing_deng_ji = ocrStrList.value[++i].toString()
      continue
    }

    if (item.includes(tableName2) ||
        item.includes(tableName3) ||
        item.includes(tableName4) ||
        item.includes(tableName5)) 
        {
          continue
    }

    if (item.includes(footName1) || item.includes(footName2)) {
      // const index = item.indexOf(':') + 1 // 获取 ':' 首次出现的位置
      // other_table_value_obj.zhi_fa_ren_yuan.zhi_fa_name1 = item.toString().slice(index)    //  从指定位置开始截取
      continue
    }

    // if (item.includes(footName2)) {
    //   const arr = item.split(':')
    //   other_table_value_obj.dang_shi_ren = arr[arr.length-1]
    //   continue
    // }

    if (item.includes(footName3)) {
      const arr = item.split(':')
      other_table_value_obj.gong_ji = arr[arr.length-1]
      continue
    }

    if (cacheList.value.length < 5) {
      const patt = /\s/ // 空白字符
      // 如果该数据段包含空白字符且过长 则认定它解析出错 进行切割处理
      if (patt.test(item.toString()) && item.toString().length > 20) 
      {
        const arr = item.split(' ')
        arr.forEach(itemForArr => {            // 把识别成一行的数据分割成单个数据并存入数组
          cacheList.value.push(itemForArr)
        })
        console.log('匹配上了', item, cacheList.value);
      } else {
        cacheList.value.push(item)
      } 
    } else {
      
      let juan_yan_obj = new juan_yan(
        cacheList.value[0].toString(),
        cacheList.value[1].toString(),
        cacheList.value[2].toString(),
        cacheList.value[3].toString(),
        cacheList.value[4].toString()
      )
      valueList.value.push(juan_yan_obj)
      cacheList.value = []
      cacheList.value.push(item)
    }
    hdlPMLastItem(i)
  }

}
const hdlPMLastItem = (index: number) => {
  if (index === ocrStrList.value.length - 1 && cacheList.value.length === 5) {
      let juan_yan_obj = new juan_yan(
        cacheList.value[0].toString(),
        cacheList.value[1].toString(),
        cacheList.value[2].toString(),
        cacheList.value[3].toString(),
        cacheList.value[4].toString(),
      )
      valueList.value.push(juan_yan_obj)
    }
}



const handleXianxingDJ = () => {
  // const title1 = '侯县烟草专卖局'
  const title1 = '侯烟存准'
  const weifa = '涉嫌'
  const tableName1 = '品种'
  const tableName2 = '条条形码'
  const tableName3 = '规格型号'
  const tableName4 = '单位'
  const tableName5 = '数量'

  const footName1 = '登记保存地点'
  const footName2 = '(福建省闽侯县烟草专卖局)'
  const footName3 = '共计'
  const footName4 = '总计'

  const tuichu = '登记保存证据的保存期限为七日'

  for (let i = 0; i < ocrStrList.value.length; i++) {

    let item = ocrStrList.value[i]
    console.log('item:', i, item);

    if (item.includes(tuichu)) {
      break
    }
    
    if (i<2) {
      // XianxingDJ_value_obj.title = item.toString()
      continue
    }

    if (item.includes(footName3) || item.includes(footName4)) {
      const gong_ji_index = item.toString().indexOf(':')
      const zong_ji_name_index = item.toString().indexOf(footName4)
      const zong_ji_index = item.toString().lastIndexOf(':')

      if (gong_ji_index != -1 && zong_ji_index != -1) {
        XianxingDJ_value_obj.he_ji = item.toString().substring(gong_ji_index + 1, zong_ji_name_index)
        XianxingDJ_value_obj.zong_ji = item.toString().substring(zong_ji_index + 1)
      }

      continue
    }
        
    if (i==2) {
      // XianxingDJ_value_obj.title = item.toString()
      XianxingDJ_value_obj.houyan_cunzhun = item.toString()
      continue
    }

    // if (item.includes(weifa)) {
    //   const arr = item.split(':')
    //   other_table_value_obj.he_ji = arr[arr.length-1]
    //   continue
    // }
    

    if (i>=3 && i<=6) {
        XianxingDJ_value_obj.weifa_shuoming += item.toString()
        continue
    }

    if(item.includes(footName2)){
      XianxingDJ_value_obj.deng_ji_di_dian = item.toString()
      continue
    }
      

    if (item.includes(tableName1) ||
        item.includes(tableName2) ||
        item.includes(tableName3) ||
        item.includes(tableName4) ||
        item.includes(tableName5))
        {
          continue
    }

    if (xxdjcacheList.value.length < 5) {
      xxdjcacheList.value.push(item)
    }
    else 
    {
      let xianxing_DJ_obj = new xxDJ(
        xxdjcacheList.value[0].toString(),
        xxdjcacheList.value[1].toString(),
        xxdjcacheList.value[2].toString(),
        xxdjcacheList.value[3].toString(),
        xxdjcacheList.value[4].toString()
      )
      valueListxxdj.value.push(xianxing_DJ_obj)
      xxdjcacheList.value = []
      xxdjcacheList.value.push(item)
    }

  }

}

const handleYiSongGongAnWuPin = () => {
  // const title1 = '侯县烟草专卖局'

  const tableName1 = '品种'
  const tableName2 = '规格'
  const tableName3 = '数量'
  const tableName4 = '备注'


  const footName1 = '移送物品清单'
  const footName2 = '福建省闽侯县烟草专卖局'
  const footName3 = '移送单位'
  const footName4 = '接收单位'
  // const footName5 =  '/\s/' // 空白字符
  const tuichu = '合计'

  for (let i = 0; i < ocrStrList.value.length; i++) {

    let item = ocrStrList.value[i]
    console.log('item:', i, item);


    
    if (item.includes(tableName1) ||
        item.includes(tableName2) ||
        item.includes(tableName3) ||
        item.includes(tableName4) ||
        item.includes(footName1) ||
        item.includes(footName2) ||
        item.includes(footName3) ||
        item.includes(footName4) ||
        (item.length == 0))
        {
          hdlYSGAWPLastItem(i)
          continue
    }
    
    if (item.includes(tuichu)) {
      YSGAWP_value_obj.he_ji = ocrStrList.value[i+1].toString()
      i=i+1
      continue

    }


    if (YSGAWPcacheList.value.length < 4) {
      YSGAWPcacheList.value.push(item)
    }
    else 
    {
      let YiSongGongAnWuPin_obj = new YSGAWP(
        YSGAWPcacheList.value[0].toString(),
        YSGAWPcacheList.value[1].toString(),
        YSGAWPcacheList.value[2].toString(),
        YSGAWPcacheList.value[3].toString()
      )
      valueListYSGAWP.value.push(YiSongGongAnWuPin_obj)
      YSGAWPcacheList.value = []
      YSGAWPcacheList.value.push(item)
    }
    hdlYSGAWPLastItem(i)
  }

}

const hdlYSGAWPLastItem = (index: number) => {
  if (index === ocrStrList.value.length - 1 && YSGAWPcacheList.value.length === 4) {
      let YiSongGongAnWuPin_obj = new YSGAWP(
        YSGAWPcacheList.value[0].toString(),
        YSGAWPcacheList.value[1].toString(),
        YSGAWPcacheList.value[2].toString(),
        YSGAWPcacheList.value[3].toString()
      )
      valueListYSGAWP.value.push(YiSongGongAnWuPin_obj)
    }
}

const handleSDHZ = () => {
  // const title1 = '侯县烟草专卖局'
  const title1 = '侯烟存准'
  const weifa = '涉嫌'
  const tableName1 = '品种'
  const tableName2 = '条条形码'
  const tableName3 = '规格型号'
  const tableName4 = '单位'
  const tableName5 = '数量'

  const footName1 = '登记保存地点'
  const footName2 = '(福建省闽侯县烟草专卖局)'
  const footName3 = '共计'
  const footName4 = '总计'

  const tuichu = '登记保存证据的保存期限为七日'

  for (let i = 0; i < ocrStrList.value.length; i++) 
  {

    let item = ocrStrList.value[i]
    console.log('item:', i, item);



        
    if (i==1) {
      // XianxingDJ_value_obj.title = item.toString()
      SDHZ_value_obj.houyan_cunzhun = item.toString()
      continue
    }

    if (i==3) {
      // XianxingDJ_value_obj.title = item.toString()
      SDHZ_value_obj.SDWS_mingchen = item.toString()
      continue
    }

    if (i==5) {
      // XianxingDJ_value_obj.title = item.toString()
      SDHZ_value_obj.SDWS_wenhao = item.toString()
      continue
    }

    if (i==7) {
      // XianxingDJ_value_obj.title = item.toString()
      SDHZ_value_obj.shou_SD_ren = item.toString()
      continue
    }

    if (i==9) {
      // XianxingDJ_value_obj.title = item.toString()
      SDHZ_value_obj.songda_didian = item.toString()
      continue
    }

    if (i==11) {
      // XianxingDJ_value_obj.title = item.toString()
      SDHZ_value_obj.songda_fangshi = item.toString()
      continue
    }

    if (i==25) {
      // XianxingDJ_value_obj.title = item.toString()
      SDHZ_value_obj.beizhu = item.toString()
      continue
    }

  }

}

const handleAJCLML = () => {
  const title1 = '闽侯县烟草专卖局'
  const title2 = '案件'
  const title3 = '材料目录'

  const tableName1 = '编 号'
  const tableName2 = '材料名称'
  const tableName3 = '单 位'
  const tableName4 = '规格 型号'
  const tableName5 = '页数'
  const tableName6 = '特征'
  const tableName7 = '备注'

  const tuichu1 = '移送人'
  const tuichu2 = '接收人'
  const tuichu3 = '年'
  const tuichu4 = '月'
  const tuichu5 = '日'
  const tuichu6 = '一份存档'
  const tuichu7 = '执法记录视频存放在证物袋中'
  const tuichu8 = '材料泪录'
  
  for (let i = 0; i < ocrStrList.value.length; i++) {

    let item = ocrStrList.value[i]
    
    if (item.includes(tableName1) ||
        item.includes(tableName2) ||
        item.includes(tableName3) ||
        item.includes(tableName4) ||
        item.includes(tableName5) ||
        item.includes(tableName6) ||
        item.includes(tableName7) ||
        item.includes(title1) ||
        (item === title2) ||
        (item.includes(title3)&& i<9) ||
        (item.includes(tuichu1))||
        (item.includes(tuichu2))||
        (item.includes(tuichu3))||
        (item.includes(tuichu4))||
        (item.includes(tuichu5))||
        (item.includes(tuichu6))||
        (item.includes(tuichu7))||
        (item.includes(tuichu8))
        )
        {
          hdlLastAJCLMLItem(i)
          continue
    }

    if (AJCLMLcacheList.value.length < 7) {
      AJCLMLcacheList.value.push(item)
    }
    else
    {
      let AJCLML_obj = new AJCLML(
        AJCLMLcacheList.value[0].toString(),
        AJCLMLcacheList.value[1].toString(),
        AJCLMLcacheList.value[2].toString(),
        AJCLMLcacheList.value[3].toString(),
        AJCLMLcacheList.value[4].toString(),
        AJCLMLcacheList.value[5].toString(),
        AJCLMLcacheList.value[6].toString()
      )
      valueListAJCLML.value.push(AJCLML_obj)
      AJCLMLcacheList.value = []
      AJCLMLcacheList.value.push(item)
    }

    hdlLastAJCLMLItem(i)
  }

}

const hdlLastAJCLMLItem = (index: number) => {
  if (index === ocrStrList.value.length - 1 && AJCLMLcacheList.value.length === 7) {
      let AJCLML_obj = new AJCLML(
        AJCLMLcacheList.value[0].toString(),
        AJCLMLcacheList.value[1].toString(),
        AJCLMLcacheList.value[2].toString(),
        AJCLMLcacheList.value[3].toString(),
        AJCLMLcacheList.value[4].toString(),
        AJCLMLcacheList.value[5].toString(),
        AJCLMLcacheList.value[6].toString()
      )
      valueListAJCLML.value.push(AJCLML_obj)
      valueListAJCLML.value.sort(compare)
    }
}
const logforme = () => {
  console.log('data', valueListxxdj.value)
  console.log('res', XianxingDJ_value_obj)
  
}

const compare = (itemA: AJCLML, itemB: AJCLML) => {
  const numA = Number(itemA.Bianhao)
  const numB = Number(itemB.Bianhao)
  if (numA < numB) {
    return -1
  } else if (numA > numB) {
    return 1
  } else {
    return 0
  }
}

const handleRemove = (file) =>{
  img.forEach(function (item,index,arr){
    if (item.name == file.name){
      img.splice(index,1)
    }
  })
}


const upload_image = ref(false);
const upload_image1 = ref(false);
const upload_image2 = ref(false);
const upload_image3 = ref(false);
const upload_image4 = ref(false);
const start_create = () =>{
  upload_image.value = true
}

const start_create1 = () =>{
  upload_image1.value = true
}

const start_create2 = () =>{
  upload_image2.value = true
}

const start_create3 = () =>{
  upload_image3.value = true
}

const start_create4 = () =>{
  upload_image4.value = true
}
// reactive ： 指针 引用 -》 地址 = 对象
const case_ocr_data=reactive({
  biao_tou: '', // 表头
  biao_ti: '', // 标题

})
// （）： 传参 -》 执行 ： 函数
const handleOcrStrList = () => {
  if ( ocrStrList.value.length !== 0) {
    case_ocr_data.biao_tou = ocrStrList.value[ocrStrList.value.length - 1].toString()
    case_ocr_data.biao_ti = ocrStrList.value[0].toString()
  }
}

const upload_create = () =>{
  ocrStrList.value = []
  let index = 0
  img.forEach(item => {
    var form = new FormData();
    form.append('file', item.raw)
    Ocr_image(form).then(res=>{
      if (res.data.message === "success"){
        ElMessage.success('添加成功');
        ocrStrList.value = ocrStrList.value.concat(res.data.data);
        upload_image.value = false;
        index++;
        // handleOcrStrList()
        // View_case_final_report_Visible.value=true;
        if (ocrStrList.value.length !== 0 && index === img.length) {
          handlePenMa()
        }
      }else {
        ElMessageBox.confirm('添加失败', '提示', {
          type: 'warning'
        })
      }
    });
  })
}

const upload_create1 = () =>{
  ocrStrList.value = []
  img.forEach(item => {
    var form = new FormData();
    form.append('file', item.raw)
    Ocr_image(form).then(res=>{
      if (res.data.message === "success"){
        ElMessage.success('添加成功');
        ocrStrList.value = ocrStrList.value.concat(res.data.data);
        upload_image1.value = false;
        // handleOcrStrList()
        // View_case_final_report_Visible.value=true;
        if (ocrStrList.value.length !== 0) {
          handleXianxingDJ()
        }
      }else {
        ElMessageBox.confirm('添加失败', '提示', {
          type: 'warning'
        })
      }
    });
  })
}

const upload_create2 = () =>{
  ocrStrList.value = []
  let index = 0
  img.forEach(item => {
    var form = new FormData();
    form.append('file', item.raw)
    Ocr_image(form).then(res=>{
      if (res.data.message === "success"){
        ElMessage.success('添加成功');
        ocrStrList.value = ocrStrList.value.concat(res.data.data);
        upload_image2.value = false;
        index++
        // handleOcrStrList()
        // View_case_final_report_Visible.value=true;
        if (ocrStrList.value.length !== 0 && index === img.length) {
          handleYiSongGongAnWuPin()
        }
      }else {
        ElMessageBox.confirm('添加失败', '提示', {
          type: 'warning'
        })
      }
    });
  })
}

const upload_create3 = () =>{
  ocrStrList.value = []
  img.forEach(item => {
    var form = new FormData();
    form.append('file', item.raw)
    Ocr_image(form).then(res=>{
      if (res.data.message === "success"){
        ElMessage.success('添加成功');
        ocrStrList.value = ocrStrList.value.concat(res.data.data);
        upload_image3.value = false;
        // handleOcrStrList()
        // View_case_final_report_Visible.value=true;
        if (ocrStrList.value.length !== 0) {
          handleSDHZ()
        }
      }else {
        ElMessageBox.confirm('添加失败', '提示', {
          type: 'warning'
        })
      }
    });
  })
}

const upload_create4 = () =>{
  ocrStrList.value = []
  let index = 0
  img.forEach(item => {
    var form = new FormData();
    form.append('file', item.raw)
    Ocr_image(form).then(res=>{
      if (res.data.message === "success"){
        ElMessage.success('添加成功');
        ocrStrList.value = ocrStrList.value.concat(res.data.data);
        upload_image4.value = false;
        index++
        
        if (ocrStrList.value.length !== 0 && index === img.length) {
          handleAJCLML()
        }
        // handleOcrStrList()
        // View_case_final_report_Visible.value=true;
      }else {
        ElMessageBox.confirm('添加失败', '提示', {
          type: 'warning'
        })
      }
    });
  })
}

</script>



<style scoped>
.handle-box {
  margin-bottom: 10px;
}


.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}

:deep(.avatar){
  width: 100px;
  height: 100px;
}
.blue {
  color: rgba(0, 118, 252, 0.79);
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

/*#inspect_record{*/
/*  position: relative;*/
/*  left: 0px;*/
/*  top: -20px;*/

/*}*/

/*#filing_report_review{*/
/*  position: relative;*/
/*  left: 0px;*/
/*  top: -22px;*/
/*}*/
</style>